<template>
  <div class="container">
    <div class="top">
      <el-card>
        <!-- 查询条件 -->
        <el-form ref="queryFormRef" :model="queryForm" label-width="100px">


          <el-row :gutter="12">
            <el-col :span="4">
              <el-form-item label="任务名称：" prop="taskName">
                <el-input v-model="queryForm.taskName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="任务类型：" prop="taskType">
                <el-input v-model="queryForm.taskType"></el-input>
              </el-form-item>
            </el-col>


            <!-- <el-col :span="4">
                <el-form-item label="时间：" prop="time">
                    <el-date-picker
                        v-model="queryForm.timeArr"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-col> -->
            <el-col :span="2">
              <el-form-item>
                <el-button style="margin-left: 66px" @click="resetForm" type="primary" plain>重置</el-button>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="middle">
      <el-table ref="multipleTable" :data="tableData" stripe tooltip-effect="dark" style="width: 100%">
        <el-table-column label="任务名称" prop="taskName" width="200px"></el-table-column>
        <el-table-column label="任务类型" prop="taskType" width="200px"></el-table-column>
        <el-table-column v-if="false"  label="开始时间" prop="patrolStart" width="130px"></el-table-column>
        <el-table-column v-if="false" label="结束时间" prop="patrolEnd" width="130px"></el-table-column>
        <el-table-column v-if="false"  label="周期" prop="cycle" width="130px"></el-table-column>
        <el-table-column v-if="false"  label="任务状态" prop="taskStatus" width="130px"></el-table-column>
        <el-table-column v-if="false"  label="创建时间" prop="createTime" width="130px"></el-table-column>
        <el-table-column v-if="false"  label="创建人" prop="taskUser" width="130px"></el-table-column>
        <el-table-column label="报告单" prop="taskReport" width="800px"></el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="success"  size="mini" @click="update(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog
      :visible.sync="addialog"
      width="32%"
      :before-close="cancel"
    >
            <span slot="footer" class="dialog-footer">
                <el-form ref="form" :model="form" label-width="80px">
                <el-form-item  label="任务名称" prop="taskName">
                    <el-input :disabled="true" v-model="form.taskName"></el-input>
                </el-form-item>
                <el-form-item  label="任务类型" prop="taskType">
                    <el-input :disabled="true" v-model="form.taskType"></el-input>
                </el-form-item>
              <el-form-item label="开始时间"  v-if="false" prop="patrolStart">
                <el-date-picker
                  style="width: 100%"
                  align="center"
                  v-model="form.patrolStart"
                  type="datetime"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
                <el-form-item label="结束时间"  v-if="false" prop="patrolEnd">
                <el-date-picker
                  style="width: 100%"
                  v-model="form.patrolEnd"
                  align="center"
                  type="datetime"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
                <el-form-item label="周期"  v-if="false" prop="cycle">
                    <el-input v-model="form.cycle"></el-input>
                </el-form-item>

                <el-form-item label="任务状态"  v-if="false" prop="taskStatus">
                    <el-input v-model="form.taskStatus"></el-input>
                </el-form-item>
                <el-form-item label="创建时间"  v-if="false" prop="createTime">
                    <el-input :disabled="true" v-model="form.createTime"></el-input>
                </el-form-item>
                <el-form-item label="创建人"  v-if="false" prop="taskUser">
                    <el-input :disabled="true" v-model="form.taskUser"></el-input>
                </el-form-item>
                  <el-form-item label="报告单"  prop="taskReport">
                      <el-input :disabled="true" type="textarea"
                                :rows="8"
                                placeholder="内容"
                                v-model="form.taskReport"></el-input>
                </el-form-item>
                <el-form-item>

                    <el-button type="primary" @click="exportExcel" v-if="updateflag">导出表格</el-button>

                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
                </el-form>


            </span>
    </el-dialog>




  </div>
</template>

<script>
  window._interceptConfig = {
    collection: true, //整体开关
    click: true, //页面点击事件信息采集开关
    page: true, //页面跳转加载事件信息采集开关
    error: true, //异常信息采集开关
    http: true, //通讯信息采集开关
    name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
    url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
  };
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
  //          "@/api/system/inspection"
  import { queryInspectionTaskTemplate ,addInspectionTaskTemplate,updInspectionTaskTemplate,delInspectionTaskTemplate, queryInspectionTaskTemplateById} from "@/api/system/inspection"
  export default {
    name: 'Hisreport',
    data() {
      return {
        total: 0,
        timer: null,//用作延迟
        // 表格数据
        tableData: null,
        // 查询参数
        updateflag:false,
        addflag:false,
        addialog:false,
        queryForm: {
          page:1,
          size: 10,
          taskName: "",
          taskType: "",
          patrolStart: "",
          patrolEnd: "",
          cycle: "",
          taskStatus: "",
          createTime: "",
          taskReport:"",
          taskUser: ""
        },
        form: {
          id:"",
          taskName: "",
          taskType: "",
          patrolStart: "",
          patrolEnd: "",
          cycle: "",
          taskStatus: "",
          createTime: "",
          taskUser: "",
          taskReport:""
        },

      }
    },
    methods: {
      handleSizeChange(val){
        this.queryForm.size = val
        this.getList()
      },
      handleCurrentChange(val){
        this.queryForm.page = val
        this.getList()
      },
      exportExcel() {
        this.$confirm('是否确认导出当前数据？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.download('/inspectionController/exportReports', {
            ...this.form
          }, `巡检报告_${new Date().getTime()}.xlsx`)
        })
      },
      add(){
        this.addialog=true
        this.addflag=true
        this.updateflag=false
      },
      copy(){
        clearTimeout(this.timer);
        //设置延迟执行,这里设置延迟两秒执行
        this.timer = setTimeout(()=>{

          this.$alert('复制成功', '镜像复制', {
            confirmButtonText: '确定',
          });


        },1500);
        this.getList()
      },
      deleteh(row){

        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delInspectionTaskTemplate(row).then(res=>{
            this.$alert(res.msg, '提示', {
            });
            this.getList()
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });




      },
      updateSave(){
        updInspectionTaskTemplate(this.form).then(res=>{
          this.$alert(res.msg, '提示', {
          });
          this.addialog=false
          this.form.id=''
          this.$refs['form'].resetFields()
          this.getList()
        })

      },
      addSave(){
        addInspectionTaskTemplate(this.form).then(res=>{
          this.$alert(res, '提示', {

          });
          this.addialog=false
          this.$refs['form'].resetFields()
          this.getList()

        })

      },
      cancel(){
        this.$refs['form'].resetFields()
        this.addialog=false

      },

      getList(){
        queryInspectionTaskTemplate(this.queryForm).then(response => {
          this.total = parseInt(response.msg)
          this.tableData = response.data
        })
      },
      // 加载数据
      initData() {
        queryInspectionTaskTemplate(this.queryForm).then(response => {
          this.total = parseInt(response.msg)
          this.tableData = response.data
        })
      },
      update(row){

        queryInspectionTaskTemplateById(row).then(res=>{
          this.form=res.data
        })
        this.updateflag=true
        this.addflag=false
        this.addialog=true
      },
      // 重置表单
      resetForm(){
        this.$refs.queryFormRef.resetFields()
      },

    },
    mounted() {
      this.initData()
    },
    watch:{
      //侦听queryForm
      queryForm:{
        deep: true,
        handler(newValue,oldValue){
          this.initData()
        }
      }
    }
  }

</script>

<style>

  .middle {
    margin: 10px;
    width: 100%;
  }
</style>
